<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>Creative Loading Effects</title>
		<meta name="description" content="Creative Loading Effects" />
		<meta name="keywords" content="loading effects, inspiration, css transition, loading animations, ajax loading, creative, modern, css3, svg, youtube, " />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="../favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
		<!-- Divisions for loading effects -->
		<div class="la-anim-1"></div>
		<div class="la-anim-2"></div>
		<div class="la-anim-3"></div>
		<div class="la-anim-4"></div>
		<div class="la-anim-5"></div>
		<div class="la-anim-6">
			<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" viewbox="0 0 500 500">
			  <path id="la-anim-6-border" transform="translate(250, 250)"/>
			  <path id="la-anim-6-loader" transform="translate(250, 250) scale(0.9)"/>
			</svg>
		</div>
		<div class="la-anim-7"></div>
		<div class="la-anim-8"><div></div><div></div></div>
		<div class="la-anim-9"><div></div><div></div><div></div><div></div></div>
		<div class="la-anim-10"></div>
		<div class="la-anim-11"></div>
		<div class="la-anim-13"></div>
		<!-- main container -->
		<div class="container">
			<header>
				<h1 class="la-anim-12" data-content="Creative Loading Effects">Creative Loading Effects</h1>
			</header>
			<div class="main">
				<div id="la-buttons" class="column">
					<button data-anim="la-anim-1">YouTube</button>
					<button data-anim="la-anim-2">Fill from left</button>
					<button data-anim="la-anim-3">Fill from down</button>
					<button data-anim="la-anim-4">Expanding box</button>
					<button data-anim="la-anim-5">3D Bar Bottom</button>
					<button data-anim="la-anim-6">Pie Timer</button>
					<button data-anim="la-anim-7">Centered Expanding Line</button>
					<button data-anim="la-anim-8">Fill Sides</button>
					<button data-anim="la-anim-9">Surrounding Borders</button>
					<button data-anim="la-anim-10">Corner indicator</button>
					<button data-anim="la-anim-11">Big Counter</button>
					<button data-anim="la-anim-12">Filling Title</button>
					<button data-anim="la-anim-13">Flat Top Bar</button>
				</div>
				<div class="column">
					<p>Loading animations don't have to be restricted to a tiny indicator.</p>
					<p>Here is some inspiration for some creative loading effects.*</p>
					<p class="small">*Note that not all browsers support animated pseudo-elements (last four effects).</p>
				</div>
			</div><!-- /main -->
		</div><!-- /container -->
		<script src="js/classie.js"></script>
		<script>
			var loader = document.getElementById('la-anim-6-loader')
				, border = document.getElementById('la-anim-6-border')
				, α = 0
				, π = Math.PI
				, t = 15
				
				, tdraw;

			function PieDraw() {
				α++;
				α %= 360;
				var r = ( α * π / 180 )
				, x = Math.sin( r ) * 250
				, y = Math.cos( r ) * - 250
				, mid = ( α > 180 ) ? 1 : 0
				, anim = 'M 0 0 v -250 A 250 250 1 ' 
				       + mid + ' 1 ' 
				       +  x  + ' ' 
				       +  y  + ' z';

				loader.setAttribute( 'd', anim );
				border.setAttribute( 'd', anim );
				if( α != 0 )
				tdraw = setTimeout(PieDraw, t); // Redraw
			}

			function PieReset() {
				clearTimeout(tdraw);
				var anim = 'M 0 0 v -250 A 250 250 1 0 1 0 -250 z';
				loader.setAttribute( 'd', anim );
				border.setAttribute( 'd', anim );
			}

			var inProgress = false;

			Array.prototype.slice.call( document.querySelectorAll( '#la-buttons > button' ) ).forEach( function( el, i ) {
				var anim = el.getAttribute( 'data-anim' ),
					animEl = document.querySelector( '.' + anim );

				el.addEventListener( 'click', function() {
					if( inProgress ) return false;
					inProgress = true;
					classie.add( animEl, 'la-animate' );

					if( anim === 'la-anim-6' ) {
						PieDraw();
					}

					setTimeout( function() {
						classie.remove( animEl, 'la-animate' );
						
						if( anim === 'la-anim-6' ) {
							PieReset();
						}
						
						inProgress = false;
					}, 6000 );
				} );
			} );
		</script>
	</body>
</html>